<template>
	<div class="refund">
		<ul class="refund-orderxinxi">
			<li>商品名称：<span v-text="shopxinxi.goods_name"></span></li>
			<li>商品金额：<span v-text="'￥'+shopxinxi.price"></span></li>
			<li>运单编号：<span v-text="shopxinxi.invoice_no"></span></li>
			<li>创建时间：<span v-text="add_time"></span></li>
		</ul>
		<div class="refund-select">
			<div class="refund-select-one">
				<h3>收货/服务情况</h3>
				<p @click="refundshow(1)">{{refunditem1}}<span><img src="../../img-order/icon_jiantouxia@3x.png"/></span></p>
				<span>退货前，建议先联系店铺客服(如提供退货物流单号)。 商家将在收到货品后进行退款处理。</span>
			</div>
			<div class="refund-select-two">
				<h3>退款原因</h3>
				<p @click="refundshow(2)">{{refunditem2}}<span><img src="../../img-order/icon_jiantouxia@3x.png"/></span></p>
			</div>
			<div class="refund-jine">退款金额<input type="text" value="" v-model="refundjine" @input="jinegeshi()"  :placeholder="'最高可退￥'+num"/> </div>
		</div>
		<div class="refund-shuoming"><span style="font-weight: bold;">退款说明</span><textarea name="" rows="2" cols="" v-model="refundtext" placeholder="请填写退款说明"></textarea></div>
		<div class="refund-imglist">
			<h3>图片举证</h3>
			<div><span v-if="sendimg"><img src="../../img-order/photo@3x.png"/><input type="file" name="" id="" value="" accept="image/*" @change="imagetian()"/></span>
				<span v-for="(item,index) in imglist"><img :src="item"/><span @click="deleimg(index)"><img src="../../img-order/icon_close@3x.png"/></span></span></div>
		</div>
		<p class="refund-tj" @click="refundTj()">提交申请</p>
		<div class="refund-model" v-if="refundly">
			<ul class="refund-model-list">
				<li v-for="(item,index) in refundlistHe" v-text="item" @click="xzneirong(index)"></li>
			</ul>
		</div>
		<div class="canvas-box">
			<canvas id="canvas"></canvas>
		</div>
	</div>
</template>

<script>
	import refundCss from '@/css/refund.css'
	
	var furl = 'http://www.ntyouxuan.com/';
	export default{
		name:"refund",
		data(){
			return{
				user:0,
				orderid:0,
				goodsid:0,
				specid:0,
				refundjine:'',
				num:'',
				imglist:[],
				sendimg:true,
				refundly:false,
				refundlist1:[
					'已收到货，退货退款',
					'已收到货，不退货只退款',
					'未收到货，需要退款'
				],
				refunditem1:'已收到货，退货退款',
				refunditem2:'缺货',
				refundlist2:[
					'缺货',
					'未按约定时间发货',
					'收到假货',
					'商品有质量问题',
					'商品发错/漏发',
					'收到的商品破损',
					'收到的商品描述不符',
					'其他'
				],
				refundlistHe:[],
				refundstatus:0,
				refundtext:'',
				shopxinxi:'',
				add_time:'',
				refundid:0
			}
		},
		mounted:function(){
			var self=this;
			this.user=localStorage.getItem("nt_user");
			if(this.$route.query.refundid){
				this.refundid=this.$route.query.refundid;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=edit",
					data:{'token':self.user,'refund_id':self.refundid},
					dataType:"json",
					success:function(res){
						if(res.done){
							self.shopxinxi=res.retval.goods;
							self.num=res.retval.refund.total_fee;
							self.add_time=new Date(Number(res.retval.goods.order_add_time)*1000).Format("yyyy-MM-dd hh:mm:ss");
							self.refunditem2=res.retval.refund.refund_reason;
							self.refunditem1=res.retval.refund.shipped;
							self.refundjine=res.retval.refund.refund_goods_fee;
							self.refundtext=res.retval.refund.refund_desc;
							for(var i=0;i<res.retval.image_list.length;i++){
								(function(i){
									if(i>=7){
										self.sendimg=false;
									}
									var a=i;
									var canvas=document.getElementById("canvas"),//获取canvas
									      ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
									      img = new Image(),//创建新的图片对象
									      base64 = '' ;//base64 
									  img.src = 'http://www.ntyouxuan.com/'+res.retval.image_list[a];
	//								  img.setAttribute("crossOrigin",'Anonymous')
									  img.onload = function(){//图片加载完，再draw 和 toDataURL
									  	console.log(img);
									  	canvas.width=img.width;
									  	canvas.height=img.height;
									       ctx.drawImage(img,0,0);    
									       base64 = canvas.toDataURL("image/png"); 
									       self.imglist.push(base64);
									  };
								})(i)
							}
						}else{
							history.go(-1);
						}
						
					}
				});
			}else{
				this.orderid=this.$route.query.ordertoken;
				this.goodsid=this.$route.query.goodstoken;
				this.specid=this.$route.query.spectoken;
				$.ajax({
					type:"post",
					url:furl+"index.php?app=ajax_refund&act=add",
					data:{'token':self.user,'order_id':self.orderid,'goods_id':self.goodsid,'spec_id':self.specid},
					dataType:'json',
					success:function(res){
						if(res.done){
							self.shopxinxi=res.retval.goods;
							self.num=res.retval.refund.total_fee;
							self.refundjine=res.retval.refund.total_fee;
							self.add_time=new Date(Number(res.retval.goods.order_add_time)*1000).Format("yyyy-MM-dd hh:mm:ss");
						}else{
							history.go(-1);
						}
						
					}
				});
			}
			
		},
		methods:{
			xzneirong:function(ind){
				if(this.refundstatus==1){
					this.refunditem1=this.refundlist1[ind];
				}
				if(this.refundstatus==2){
					this.refunditem2=this.refundlist2[ind];
				}
				this.refundly=false;
			},
			refundshow:function(status){
				this.refundstatus=status;
				if(status==1){
					this.refundlistHe=this.refundlist1;
				}
				if(status==2){
					this.refundlistHe=this.refundlist2;
				}
				this.refundly=true;
			},
			refundTj:function(){
				var self=this;
				if(this.refundjine==''){
					this.refundjine=0;
				}
				if(this.$route.query.refundid){
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_refund&act=edit_post",
						data:{'token':self.user,'refund_id':self.refundid,'refund_cert':self.imglist,'shipped':self.refunditem1,'refund_goods_fee':self.refundjine,'refund_reason':self.refunditem2,'refund_desc':self.refundtext},
						dataType:'json',
						success:function(res){
							if(res.done){
								self.$router.push({path:'/myorder/refundxq',query:{'refundid':res.retval.refund_id}});
							}
						}
					});
				}else{
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax_refund&act=add_post",
						data:{'token':self.user,'order_id':self.orderid,'goods_id':self.goodsid,'spec_id':self.specid,'refund_cert':self.imglist,'shipped':self.refunditem1,'refund_goods_fee':self.refundjine,'refund_reason':self.refunditem2,'refund_desc':self.refundtext},
						dataType:'json',
						success:function(res){
							if(res.done){
								self.$router.push({path:'/myorder/refundxq',query:{'refundid':res.retval.refund_id}});
							}
						}
					});
				}
				
//				
			},
			jinegeshi:function(){
				var self=this;
				var obj=self.refundjine;
				obj = obj.replace(/[^\d.]/g,""); //先把非数字的都替换掉，除了数字和. 
				obj = obj.replace(/^\./g,""); //必须保证第一个为数字而不是. 
				obj = obj.replace(/\.{2,}/g,"."); //保证只有出现一个.而没有多个. 
				obj = obj.replace(".","$#$").replace(/\./g,"").replace("$#$","."); //保证.只出现一次，而不能出现两次以上 
				if(obj.replace(/^[0]/g,"")!=self.refundjine&&obj.replace(/^[0]/g,"")>=1){
					self.refundjine=obj.replace(/^[0]/g,"");
				}else{
					if(obj==""){
						self.refundjine='0';	
					}else{
						
						if((obj.toString()).indexOf('.')!=-1){
							//有小数点的话
							if(obj.split("").length-(obj.toString()).indexOf('.')>3){
								self.refundjine=Number(obj.substring(0,(obj.toString()).indexOf('.')+3));
							}
						}	
					}
					if(Number(obj)>Number(self.num)){
						self.refundjine='';
					}
				}
			},
			imagetian:function(){
				var self=this;
				var dataUrl=$('input[type=file]')[0].files[0];
				var reader = new FileReader();
                //读取文件过程方法
                reader.onload = function (e) {
//                  console.log("成功读取....");
                    self.imglist.push(e.target.result);
                    $('input[type=file]')[0].value="";
                    if(self.imglist.length>=8){
                    	self.sendimg=false;
                    }
                    //或者 img.src = this.result;  //e.target == this
                }

                reader.readAsDataURL(dataUrl);				
			},
			deleimg:function(ind){
				this.imglist.splice(ind,1);
				console.log(this.imglist.length)
				if(this.imglist.length<8){
					this.sendimg=true;
				}
			}
		}
	}
</script>

<style>
	.canvas-box{height:0;overflow: hidden;}
</style>